import PropTypes from "prop-types";
import { useState } from "react";
// import { useState } from "react";
import "./style.scss";

function Button(props){
  let { type,children,onClick }= props;
  return(
    <div className="ml-button">
      <span className={type} onClick={onClick}>{children}</span>
    </div>
  )
}
Button.propTypes={
  type:PropTypes.oneOf(["default","primary","danger","info"]),
  children:PropTypes.node,
  onClick:PropTypes.func,
}
Button.defaultProps={
  type:'default',
  children:'按钮',
  onClick:()=>{ }
}

function ModalHeader(props){
  let { title,aa,onCancel } = props;
  return(
    <div>
      <div>
        {title}
      </div>
      <div onClick={onCancel}>{aa && "X"}</div>
    </div>)
}

function ModalFooter(props){
  let { type,onCancel,onOk,footer } = props;
  let renderFooter=()=>{
    let btns=[];
    switch(type){
      case "confirm":
        btns=[
          <Button type="primary" key="1" onClick={onOk}>确定</Button>,
          <Button key="2" onClick={onCancel}>取消</Button>
        ]
        break;
      case "danger":  
        btns=[
          <Button type="danger" key="1" onClick={onOk}>删除</Button>,
          <Button key="2" onClick={onCancel}>取消</Button>
        ]
        break;
      case "info":
        btns=[
          <Button type="info" key="1" onClick={onCancel}>我知道了</Button>,
        ]
        break;
    }
    return btns;
  }
  return (
    footer?footer():renderFooter()
  )
}

function Modal(props) {
  let { children,visiable,onCancel } = props;
  
  let handerLayer=(e)=>{
    console.log(e.target);
    console.log(e.currentTarget);
    if(e.target.dataset.self){
      onCancel()
    }
  }
  return (
    <div className="ml-layer" style={{display:visiable?'block':'none'}} data-self="layer" onClick={handerLayer}>
      <div className="ml-modal">
        <header>
          <ModalHeader {...props}></ModalHeader>          
        </header>
        <main>{children}</main>
        <footer>
          {/* {renderFooter()} */}
          {/* {footer?footer():renderFooter()} */}
          <ModalFooter {...props}></ModalFooter>
        </footer>
      </div>
    </div>
  )
}
Modal.propTypes={
  title:PropTypes.elementType,
  aa:PropTypes.bool,
  children:PropTypes.node,
  type:PropTypes.oneOf(["confirm","danger","info"]),
  visiable:PropTypes.bool,
  onCancel:PropTypes.func,
  onOk:PropTypes.func,
  footer:PropTypes.func,
}
Modal.defaultProps={
  title:"默认小标题",
  aa:true,
  children:<div>主题内容默认值</div>,
  type:"info",
  visiable:false,
  onCancel:()=>{ },
  onOk:()=>{ },
  footer:()=>{ },
}

function PageA() {
  let [visiable,setVisiable] = useState(false)
  let submit=()=>{
    setTimeout(() => {
      setVisiable(false)
    }, 200);
  }
  return (
    <div>
      <button onClick={()=>setVisiable(true)}>open modal</button>
      <Modal 
        title={"添加用户"} 
        aa 
        type="danger" 
        visiable={visiable} 
        onCancel={()=>setVisiable(false)} 
        onOk={submit} 
        footer={
          ()=>{
            return [
              <Button type='danger' key='1' onClick={() => setVisiable(false)}>残忍离开</Button>,
              <Button type='primary' key='2'>确定</Button>
            ]
          }
        }
      >
        <div>
          <input type="text" />
          <div>你确定要添加此用户吗？</div>
        </div>
      </Modal>
    </div>
  )
}
export default PageA;